<!DOCTYPE html>
<html>
<head>
	<title>tab插件</title>
</head>
<style type="text/css">
     .contain{padding: 0;margin:0;}
	.tabTit{clear: both;list-style: none;height: 50px;padding: 0;margin: 0;}
	.tabTit li{float: left;width: 100px;height: 50px;line-height: 50px;border:1px solid #ccc;text-align: center;cursor: pointer;}
	.tabTit li.on{background: red;}
	.tabContent{width: 300px;border:1px solid #ccc;}
	.tabContent div{width: 300px;display: none}
	.tabContent div.show{display: block;}
</style>
<body>
<div class="contain" id="contain">
	<ul class="tabTit" id="tabTit">
		<li class="on">html</li>
		<li>css</li>
		<li>javascript</li>
	</ul>
	<div class="tabContent" id="tabContent">
		<div class="show">htmlContent</div>
		<div>cssContent</div>
		<div>javascriptContent</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-tab-1.0.js"></script>
<script type="text/javascript">
	$("#contain").tab({
		eventType:'mouseover'
	});
</script>
</body>
</html>